<template>
  <PageWrapper dense>
    <!-- 表格 -->
    <BasicTable row-key="sessionId" @register="registerTable">
      <template #bodyCell="{ column, record }">
        <template v-if="column.key === 'avatar'">
          <a-avatar v-if="record.avatar" :src="record.avatar" />
          <a-avatar v-if="!record.avatar">{{ record.nickname?.substring(0, 1) }}</a-avatar>
        </template>
        <template v-if="column.key === 'timeout'">
          {{ formatToDuration(record.timeout) }}
        </template>
        <template v-if="column.key === 'action'">
          <div class="basic-table-action center">
            <Authority value="sys:online:force">
              <a-popconfirm
                title="确定要强制退出吗？"
                ok-text="是"
                cancel-text="否"
                @confirm="handleForceLogin(record.token)"
              >
                <a-button type="link" danger size="small">
                  <template #icon>
                    <Icon icon="ant-design:logout-outlined" />
                  </template>
                  强制退出
                </a-button>
              </a-popconfirm>
            </Authority>
          </div>
        </template>
      </template>
    </BasicTable>
  </PageWrapper>
</template>
<script lang="ts">
  import { defineComponent } from 'vue';
  import { BasicTable, useTable } from '@/components/Table';
  import { columns, searchFormSchema } from '@/views/auth/user/online/online.data';
  import { PageWrapper } from '@/components/Page';
  import { select, forceLogin } from '@/api/auth/sysUserOnline';
  import { Authority } from '@/components/Authority';
  import { Icon } from '@/components/Icon';
  import { useGlobSetting } from '@/hooks/setting';
  import { formatToDuration } from '@/utils/dateUtil';

  export default defineComponent({
    name: 'AuthUserOnlineList',
    components: {
      PageWrapper,
      BasicTable,
      Authority,
      Icon,
    },
    setup() {
      const globSetting = useGlobSetting();

      // onMounted(() => {
      //   reload();
      // });

      /**
       * 初始化表格
       */
      const [registerTable, { reload }] = useTable({
        title: '在线用户',
        columns,
        api: select,
        useSearchForm: true,
        tableSetting: {
          redo: false,
        },
        formConfig: {
          schemas: searchFormSchema,
        },
        actionColumn: {
          width: 120,
          title: '操作',
          key: 'action',
        },
      });

      function handleForceLogin(token: string) {
        forceLogin(token).then(() => {
          reload();
        });
      }

      return {
        apiUrl: globSetting.apiUrl,
        formatToDuration,
        registerTable,
        handleForceLogin,
      };
    },
  });
</script>
